<template>
  <view class="container" @refresh="onPullDownRefresh">
        <!-- 业务员内容 -->
        <template v-if="isOthers">
      <view class="business-container">
      <view class="page-title">暂无信息</view>
      </view>
    </template>
    <!-- 业务员内容 -->
    <template v-if="isBusiness">
      <view class="business-container">
        <view class="page-title">我的房间信息</view>
        <view class="room-list">
          <view v-if="loading" class="loading">加载中...</view>
          <view v-else-if="businessRoomList.length === 0" class="no-data">暂无房间信息</view>
          <view v-else class="room-item" v-for="(item, index) in businessRoomList" :key="index">
            <view class="room-info">
              <view class="room-header">
                <text class="room-id">房间名：{{ item.cc || '暂无' }}</text>
                <text class="room-name">房间号：{{ item.id }}</text>
              </view>
              <view class="room-details">
                <text class="detail-item">订房人：{{ item.bookerName || '暂无' }}</text>
				 <text class="detail-item">dj：{{ item.djName || '暂无' }}</text>
				  <text class="detail-item">服务员：{{ item.serviceStaffName || '暂无' }}</text>
               <!-- <text class="detail-item">开始时间：{{ formatDate(item.startTime) }}</text>
                <text class="detail-item">结束时间：{{ formatDate(item.endTime) }}</text> -->
                <text class="detail-item">房间状态：{{ getStatusText(item.status) }}</text>
             
    <!-- 业务员列表 -->
    <view v-if="item.groupNameList && item.groupNameList.length > 0" class="salesperson-section">
                <text class="section-title">业务员列表：</text>
                <view class="salesperson-list">
                  <view v-for="(salesperson, sIndex) in item.groupNameList" :key="sIndex" class="salesperson-item">
                    <text class="salesperson-info">{{ (salesperson.employeeId || '暂无') + '-' + (salesperson.userName || '暂无') + '-' + (salesperson.level || '暂无') }}</text>
                  </view>
                </view>
              </view>

				 <text class="detail-item">业务员买单：{{ item.salespersonPayment || '暂无' }}</text>
              </view>
              
          
              
              <text style="font-size:35rpx ;color: red;" class="detail-item">房间公告：{{ item.remark || '暂无' }}</text>
            </view>
            <!-- <button class="view-detail-btn" @click="goToRoomDetail(item)">查看详情</button> -->
          </view>
        </view>
      </view>
    </template>
    
    <!-- 发台员内容 -->
    <template v-else-if="isFataiyuan">
      <view class="fatai-container">
        <view class="room-list">
          <view v-if="loading" class="loading">加载中...</view>
          <view v-else-if="roomList.length === 0" class="no-data">暂无发台请求</view>
          <view v-else class="room-item" v-for="(item, index) in roomList" :key="index">
            <view class="room-info">
              <view class="room-header">
                <text class="room-id">房间号：{{ item.area }}</text>
                <text class="room-name">房间名：{{ item.purpose || '暂无' }}</text>
              </view>
              <view class="room-details">
                <text class="detail-item">订房人：{{ item.bookerName || '暂无' }}</text>
                <text class="detail-item">开始时间：{{ formatDate(item.startTime) }}</text>
                <text class="detail-item">结束时间：{{ formatDate(item.endTime) }}</text>
                <text class="detail-item">房间公告：{{ item.remark || '暂无' }}</text>
				
              </view>
            </view>
            <button class="confirm-btn" @click="showConfirmDialog(item)">确认发台</button>
          </view>
        </view>
      </view>
    </template>

    <!-- 吧员内容 -->
    <template v-else-if="isBayuan">
      <view class="bartender-page">
        <view class="page-title">送酒列表</view>
        <view class="wine-list-bartender">
          <view class="wine-item-bartender" v-for="wine in wineListForBartender" :key="wine.id">
            <view class="item-header-bartender">
              <text class="date">{{ formatDate(wine.storageDate) }}</text>
              <text class="room">房间: {{ wine.roomName }}</text>
            </view>
            <view class="item-main-content">
              <view class="item-body-bartender">
                <view class="info-row-bartender">
                    <text class="label">酒名:</text>
                    <text class="value">{{ wine.wineName }}</text>
                </view>
                <view class="info-row-bartender">
                    <text class="label">送酒数量:</text>
                    <text class="value">{{ wine.bb }}</text>
                </view>
                <view class="info-row-bartender">
                    <text class="label">存酒人:</text>
                    <text class="value">{{ wine.userName }}</text>
                </view>
              </view>
              <button class="confirm-btn" @click="confirmWine(wine.id)">确认</button>
            </view>
          </view>
          <view v-if="wineListForBartender.length === 0" class="no-data-bartender">暂无送酒记录</view>
        </view>
      </view>
    </template>

    <!-- 非业务员内容 -->
    <template v-else>
      
<!-- 
在这里增加一个输入框和搜索按钮重置按钮，如果是guanliceng和duchayuan角色进入页面则展示，其他角色不展示，可以输入用户名进行搜索当前用户所在的房间信息使用接口searchRoomUserToday，使用用户名查询用户（listUser）然后使用用户id查询房间信息
-->

      <!-- 状态筛选 -->
      <view class="status-bar">
        <view
          v-for="s in statusList"
          :key="s.key"
          class="status-item"
          :style="{ backgroundColor: s.bg }"
          @click="changeStatus(s.key)"
        >
          <text :style="{ color: s.color }" class="status-name">{{ s.name }}</text>
          <text :style="{ color: s.color }" class="status-count">{{ s.count }}</text>
        </view>
      </view>

      <!-- 排序 + 区域 -->
      <view class="filter-bar">
        <picker mode="selector" :range="sortOptions" @change="onSortChange">
          <view class="filter-item">排序：{{ sortOptions[sortIndex] }}</view>
        </picker>
        
        <picker mode="selector" :range="areaOptions" @change="onAreaChange">
          <view class="filter-item">区域：{{ areaOptions[areaIndex] }}</view>
        </picker>
      </view>
      <!-- 

-->

<view v-if="isManagerOrInspector" class="user-room-search-bar">
  <input v-model="searchUserName" placeholder="请输入用户名" class="search-input-half" />
  <input v-model="searchEmployeeId" placeholder="请输入工号" class="search-input-half" />
  <button class="search-btn" @click="handleSearchUserRoom" :disabled="searchLoading || (!searchUserName && !searchEmployeeId)">搜索</button>
  <button class="reset-btn" @click="handleResetUserRoom">重置</button>
</view>
      <!-- 包厢列表 -->
      <scroll-view class="room-list" scroll-y>
        <!-- 业务经理部门房间加载状态 -->
        <view v-if="isBusinessManager && deptLoading" class="dept-loading">
          <text class="dept-loading-text">正在加载部门房间信息...</text>
        </view>
        
        <view class="room-grid">
          <view
            v-for="room in filteredList"
            :key="room.id"
            class="room-card"
            :style="{
              backgroundColor: (statusMap[room.status] && statusMap[room.status].bg) || '#fff',
              color: (statusMap[room.status] && statusMap[room.status].color) || '#000'
            }"
            @click="goToRoomDetail(room)"
          >
           <text class="room-id">{{ room.cc || '暂无' }}</text>
           <text class="room-name">{{ room.bookerName || '-' }}</text>
          </view>
        </view>
      </scroll-view>


    </template>
  </view>
</template>

<script>
import { listRoom, searchYeWuYuanRoom ,searchRoomUserToday,searchDeptRoomMsg} from '@/api/system/room.js'
import { listUser } from '@/api/system/user.js'
import { listWine } from '@/api/system/wine.js'
import { updateWine } from '@/api/system/wine.js'
import { updateRoom } from '@/api/system/room.js'

export default {
  data() {
    return {
      isBusiness: false,
      isBayuan: false,
      isFataiyuan: false, // 添加发台员标识
      // —— 图中八个状态（名称 + 数量 + 背景色 + 文字色）
      statusList: [
        { key: 'all',      name: '全部', count: 0, bg: '#fff',    color: '#000' },
        { key: 'available',name: '可用', count: 0, bg: '#55aaff',    color: '#000' },
        { key: 'booked',   name: '预订', count: 0, bg: '#FF2FA2 ',color: '#000' },
        { key: 'fatai',     name: '发台', count: 0, bg: '#FFD305',color: '#000' },
        { key: 'inuse',    name: '使用', count: 0, bg: '#FF4D4F',color: '#fff' },
        { key: 'checkout', name: '结账', count: 0, bg: '#722ED1',color: '#fff' },
        { key: 'clean',    name: '清洁', count: 0, bg: '#40A9FF',color: '#fff' },
        { key: 'union',    name: '联台', count: 0, bg: '#613400',color: '#fff' },
      ],
      currentStatus: 'all',

      // 排序、区域
      sortOptions: ['默认', '按编号', '按价格'],
      sortIndex: 0,
      areaOptions: ['全部', '一区', '二区', '三区'],
      areaIndex: 0,

      // 包厢列表
      roomList: [],
      businessRoomList: [], // 业务员房间列表
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        area: null,
        status: null
      },
      wineListForBartender: [], // 吧员存酒列表
      bartenderTimer: null, // 吧员定时器
      searchUserName: '',
      searchEmployeeId: '',
      searchUserRoomResult: '',
      searchLoading: false,
      searchRoomIds: [],
      isBusinessManager: false, // 业务经理标识
      deptRoomIds: [], // 部门房间ID列表
      deptLoading: false, // 部门房间加载状态
    };
  },
  computed: {
    filteredList() {
      let list = this.roomList.reverse();
      console.log('[filteredList] 当前roomList:', this.roomList);
      
      // 业务经理：与部门房间求交集
      if (this.isBusinessManager && this.deptRoomIds.length > 0) {
        list = list.filter(r => this.deptRoomIds.includes(String(r.id)));
        console.log('[filteredList] 业务经理部门过滤，部门房间ID:', this.deptRoomIds, '结果:', list);
      }
      
      if (this.searchRoomIds && this.searchRoomIds.length > 0) {
        list = list.filter(r => this.searchRoomIds.includes(String(r.id)));
        console.log('[filteredList] 过滤后仅展示id:', this.searchRoomIds, '结果:', list);
      }
      if (this.currentStatus !== 'all') {
        list = list.filter(r => r.status === this.currentStatus);
        console.log('[filteredList] 状态过滤:', this.currentStatus, '结果:', list);
      }
      if (this.areaIndex !== 0) {
        const area = this.areaOptions[this.areaIndex];
        list = list.filter(r => r.area === area);
        console.log('[filteredList] 区域过滤:', area, '结果:', list);
      }
      if (this.sortIndex === 1) {
        list = list.slice().sort((a,b) => a.id.localeCompare(b.id));
        console.log('[filteredList] 按id排序:', list);
      } else if (this.sortIndex === 2) {
        list = list.slice().sort((a,b) => a.price - b.price);
        console.log('[filteredList] 按价格排序:', list);
      }
      return list;
    },
	    statusMap() {
	      return this.statusList.reduce((map, s) => {
	        map[s.key] = { bg: s.bg, color: s.color }
	        return map
	      }, {})
	    },
    isManagerOrInspector() {
      const roles = uni.getStorageSync('roles')
      return roles && (roles.includes('guanliceng') || roles.includes('duchayuan')|| roles.includes('tongjiyuan'))
    },
  },
  methods: {
    // 根据用户名前缀获取部门ID
    getDeptIdByUserName() {
      const userInfo = uni.getStorageSync('userInfo');
      if (!userInfo || !userInfo.user || !userInfo.user.userName) {
        return null;
      }
      
      const userName = userInfo.user.userName;
      // 提取用户名中的大写字母前缀
      const match = userName.match(/^([A-Z])/);
      if (!match) {
        return null;
      }
      
      const prefix = match[1];
      // A=202, B=203, ..., Z=227
      const deptId = 202 + (prefix.charCodeAt(0) - 'A'.charCodeAt(0));
      console.log('[业务经理] 用户名:', userName, '前缀:', prefix, '部门ID:', deptId);
      return deptId;
    },
    changeStatus(key) {
      this.currentStatus = key;
      this.queryParams.status = key === 'all' ? null : key;
      this.getRoomList();
    },
    onSortChange(e) {
      this.sortIndex = e.detail.value;
    },
    onAreaChange(e) {
      this.areaIndex = e.detail.value;
      this.queryParams.area = e.detail.value === 0 ? null : this.areaOptions[e.detail.value];
      this.getRoomList();
    },
    // 获取房间列表
    async getRoomList() {
      try {
        this.loading = true;
        const res = await listRoom(this.queryParams);
        if (res.code === 200) {
          if (this.isFataiyuan) {
            // 发台员只显示发台中的房间
            this.roomList = res.rows.filter(room => room.status === 'fataizhong');
          } else {
            // 其他角色显示所有房间
          this.roomList = res.rows.map(room => ({
            id: room.id,
            cc: room.cc,
            bookerName: room.bookerName,
            timeRange: `${this.formatTime(room.startTime)}-${this.formatTime(room.endTime)}`,
            price: room.price,
            status: room.status,
            group: room.groupName,
            purpose: room.purpose,
            area: room.area,
            booker: room.bookerId,
            serviceStaff: room.serviceStaffId,
            dj: room.djId,
            salesperson: room.groupName,
            entryCount: room.bookerEntryCount
          }));
          
          // 更新状态计数
          this.updateStatusCount();
          }
        } else {
          uni.showToast({
            title: res.msg || '获取房间列表失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.showToast({
          title: '获取房间列表失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    // 更新状态计数
    updateStatusCount() {
      const counts = this.roomList.reduce((acc, room) => {
        acc[room.status] = (acc[room.status] || 0) + 1;
        return acc;
      }, {});
      
      this.statusList = this.statusList.map(status => ({
        ...status,
        count: status.key === 'all' ? this.roomList.length : (counts[status.key] || 0)
      }));
    },
    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return '';
      const date = new Date(timeStr);
      return `${date.getHours()}`;
    },
    goToRoomDetail(room) {
      uni.navigateTo({
        url: `/pages/work/roomDetail/roomDetail?room=${encodeURIComponent(JSON.stringify(room))}`
      });
    },
    // 获取吧员的存酒列表
    async getWineListForBartender() {
      try {
        const userInfo = uni.getStorageSync('userInfo');
        if (!userInfo || !userInfo.user || !userInfo.user.userId) {
          this.$modal.msgError('未获取到用户信息，请重新登录');
          return;
        }

        this.loading = true;
        const queryParams = { aa: '送酒中' };
        const res = await listWine(queryParams);
        if (res.code === 200) {
          this.wineListForBartender = res.rows || [];
        } else {
          this.$modal.msgError(res.msg || '获取存酒列表失败');
        }
      } catch (error) {
        console.error('获取存酒列表失败:', error);
        this.$modal.msgError('获取存酒列表失败');
      } finally {
        this.loading = false;
      }
    },
    // 确认存酒（吧员操作）
    async confirmWine(wineId) {
      uni.showModal({
        title: '确认操作',
        content: '是否确认该送酒已完成并清空记录？',
        success: async (res) => {
          if (res.confirm) {
            try {
              // 查找要更新的酒品记录
              const wineToUpdate = this.wineListForBartender.find(wine => wine.id === wineId);
              if (!wineToUpdate) {
                this.$modal.msgError('未找到该酒品记录');
                return;
              }

              // 创建更新对象，将aa和bb字段设置为空字符串
              const updateData = { ...wineToUpdate, aa: '', bb: '' };
              const res = await updateWine(updateData);

              if (res.code === 200) {
                this.$modal.msgSuccess('确认成功，记录已更新');
                // 刷新吧员存酒列表
                this.getWineListForBartender();
              } else {
                this.$modal.msgError(res.msg || '更新失败');
              }
            } catch (error) {
              console.error('确认存酒失败:', error);
              this.$modal.msgError('确认存酒失败');
            }
          }
        }
      });
    },
    // 格式化日期，与存酒页面保持一致
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    // 显示确认弹窗
    showConfirmDialog(room) {
      uni.showModal({
        title: '确认发台',
        content: `是否确认房间 ${room.area} 的发台请求？`,
        success: (res) => {
          if (res.confirm) {
            this.confirmFatai(room);
          }
        }
      });
    },
    // 确认发台
    async confirmFatai(room) {
      try {
        const roomData = {
          ...room,
          status: 'inuse'
        };
        
        const res = await updateRoom(roomData);
        if (res.code === 200) {
          this.$modal.msgSuccess('确认发台成功');
          // 重新获取房间列表
          this.getRoomList();
        } else {
          this.$modal.msgError(res.msg || '确认发台失败');
        }
      } catch (error) {
        console.error('确认发台失败:', error);
        this.$modal.msgError('确认发台失败');
      }
    },
    doRefresh() {
      if (this.isBusiness) {
        this.getBusinessRoomList().finally(() => uni.stopPullDownRefresh());
      } else if (this.isFataiyuan) {
        this.getRoomList().finally(() => uni.stopPullDownRefresh());
      } else if (this.isBayuan) {
        this.getWineListForBartender().finally(() => uni.stopPullDownRefresh());
      } else if (this.isBusinessManager) {
        // 业务经理：先获取部门房间，再获取所有房间
        this.getBusinessManagerDeptRooms().then(() => {
          this.getRoomList();
        }).catch(error => {
          console.error('[业务经理] 刷新失败:', error);
          this.getRoomList(); // 即使部门查询失败，也要获取房间列表
        }).finally(() => uni.stopPullDownRefresh());
      } else {
        this.getRoomList().finally(() => uni.stopPullDownRefresh());
      }
    },
    // 启动吧员定时器
    startBartenderTimer() {
      if (this.isBayuan) {
        this.bartenderTimer = setInterval(() => {
          this.getWineListForBartender();
        }, 60000); // 每分钟更新一次
      }
    },
    // 清除吧员定时器
    clearBartenderTimer() {
      if (this.bartenderTimer) {
        clearInterval(this.bartenderTimer);
        this.bartenderTimer = null;
      }
    },
    // 获取业务员房间列表
    async getBusinessRoomList() {
      try {
        this.loading = true;
        const userInfo = uni.getStorageSync('userInfo');
        if (!userInfo || !userInfo.user || !userInfo.user.userId) {
          this.$modal.msgError('未获取到用户信息，请重新登录');
          return;
        }

        const res = await searchYeWuYuanRoom({ userId: userInfo.user.userId });
        if (res.code === 200) {
          this.businessRoomList = res.data || [];
        } else {
          this.$modal.msgError(res.msg || '获取房间信息失败');
        }
      } catch (error) {
        console.error('获取业务员房间列表失败:', error);
        this.$modal.msgError('获取房间信息失败');
      } finally {
        this.loading = false;
      }
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'available': '可用',
        'booked': '预订',
        'fatai': '发台',
        'inuse': '使用中',
        'checkout': '结账',
        'clean': '清洁',
        'union': '联台',
        'fataizhong': '发台中'
      };
      return statusMap[status] || status;
    },
    async handleSearchUserRoom() {
      if (!this.searchUserName && !this.searchEmployeeId) return;
      this.searchLoading = true;
      this.searchUserRoomResult = '';
      try {
        // 1. 查用户 - 支持用户名或工号查询
        const userQuery = {};
        if (this.searchUserName) {
          userQuery.userName = this.searchUserName;
        }
        if (this.searchEmployeeId) {
          userQuery.employeeId = this.searchEmployeeId;
        }
        
        const userRes = await listUser({ ...userQuery, pageNum: 1, pageSize: 1 });
        console.log('[搜索] 用户接口返回:', userRes);
        if (!userRes.rows || userRes.rows.length === 0) {
          this.$modal && this.$modal.msgError ? this.$modal.msgError('未找到该用户') : uni.showToast({ title: '未找到该用户', icon: 'none' });
          this.searchLoading = false;
          return;
        }
        const userId = userRes.rows[0].userId;
        // 2. 查房间
        const roomRes = await searchRoomUserToday({ userId });
        console.log('[搜索] 房间接口返回:', roomRes);
        const rows = roomRes.rows || roomRes.data;
        if (roomRes.code === 200 && rows && rows.length > 0) {
          this.searchRoomIds = rows.map(room => room.id);
          this.total = roomRes.total || rows.length;
          this.searchUserRoomResult = '';
          console.log('[搜索] 搜索到的房间id:', this.searchRoomIds);
        } else {
          this.searchRoomIds = [];
          this.total = 0;
          this.searchUserRoomResult = '未找到该用户今日所在房间';
          console.log('[搜索] 未找到房间，roomRes:', roomRes);
        }
      } catch (e) {
        this.searchRoomIds = [];
        this.total = 0;
        this.searchUserRoomResult = '查询失败';
        console.error('[搜索] 查询异常:', e);
      } finally {
        this.searchLoading = false;
      }
    },
    handleResetUserRoom() {
      this.searchUserName = '';
      this.searchEmployeeId = '';
      this.searchUserRoomResult = '';
      this.searchRoomIds = [];
      this.getRoomList();
    },
    // 获取业务经理部门房间信息
    async getBusinessManagerDeptRooms() {
      try {
        this.deptLoading = true;
        const deptId = this.getDeptIdByUserName();
        if (!deptId) {
          console.log('[业务经理] 无法获取部门ID');
          this.deptRoomIds = [];
          return;
        }
        
        console.log('[业务经理] 查询部门房间，部门ID:', deptId);
        const res = await searchDeptRoomMsg({ deptId });
        
        if (res.code === 200 && res.data) {
          // 接口现在直接返回房间ID数组
          this.deptRoomIds = res.data.map(roomId => String(roomId));
          console.log('[业务经理] 部门房间ID列表:', this.deptRoomIds);
        } else {
          console.log('[业务经理] 查询部门房间失败:', res.msg);
          this.deptRoomIds = [];
        }
      } catch (error) {
        console.error('[业务经理] 获取部门房间信息失败:', error);
        this.deptRoomIds = [];
      } finally {
        this.deptLoading = false;
      }
    },
  },
  onLoad() {
    // 检查用户角色
    const roles = uni.getStorageSync('roles') || [];
    this.isBusiness = roles.includes('yewuyuan') || roles.includes('kaoqinyuan') || roles.includes('fahaoyuan');
    this.isOthers =  roles.includes('kaoqinyuan') || roles.includes('fahaoyuan');
    this.isBayuan = roles.includes('bayuan');
    this.isFataiyuan = roles.includes('fataiyuan'); // 检查发台员角色
    this.isBusinessManager = roles.includes('yewujinli'); // 检查业务经理角色
    
    // 根据角色显示不同的内容
    if (this.isBusiness) {
      this.getBusinessRoomList(); // 获取业务员房间列表
    } else if (this.isFataiyuan) {
      this.getRoomList(); // 获取发台中的房间列表
    } else if (this.isBayuan) {
      this.getWineListForBartender(); // 获取吧员的存酒列表
      this.startBartenderTimer(); // 启动定时器
    } else if (this.isBusinessManager) {
      // 业务经理：先获取部门房间，再获取所有房间
      this.getBusinessManagerDeptRooms().then(() => {
        this.getRoomList();
      }).catch(error => {
        console.error('[业务经理] 初始化失败:', error);
        this.getRoomList(); // 即使部门查询失败，也要获取房间列表
      });
    } else {
      this.getRoomList(); // 获取房间列表
    }
  },
  onPullDownRefresh() {
    this.doRefresh();
  },
  onUnload() {
    // 页面卸载时清除定时器
    this.clearBartenderTimer();
  },
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #000;
}

/* 美化状态栏 */
.status-bar {
  display: flex; /* 改为 flex */
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-around; /* 均匀分布 */
  /* grid-template-columns: repeat(4, 1fr); */
  /* gap: 8px; */           /* 卡片间距 */
  padding: 12px;      /* 外边距 */
}
.status-item {
  flex: 1; /* 每个 item 均分空间 */
  min-width: 23%; /* 确保一行四个，留有间距 */
  margin: 4px; /* 添加外边距作为间距 */
  padding: 12px 0;
  border: 1px solid #222;
  border-radius: 6px; /* 圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 轻微阴影 */
  text-align: center;
  /* transition: transform 0.2s ease, box-shadow 0.2s ease; */ /* 移除 transition */
  /* cursor: pointer; */ /* 移除 cursor */
}

.status-item:hover {
  /* transform: translateY(-2px); */ /* 移除 transform */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
/* 激活态在 hover 基础上加重阴影 */
.status-item.active {
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.5);
}
.status-item .status-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.status-item .status-count {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* 排序 & 区域 */
.filter-bar {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center;            /* 垂直居中 */
  background: #000;
  padding: 8px;
  border-bottom: 1px solid #222;
}
.filter-item {
  /* 不要再写 flex:1，否则会强制平分 */
  text-align: center;
  color: #fff;
  /* 如果需要，可加上固定宽度，比如 width: 45%; */
}
/* 包厢列表 */
.room-list {
  flex: 1;
}
.room-grid {
  display: flex;
  flex-wrap: wrap;
}
.room-card {
  width: 33.3333%;
  /* 如果要兼容更老平台，可用 padding hack 或给定固定高度 */
  /* aspect-ratio: 1; */ /* 移除 aspect-ratio */
  border: 1px solid #222;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 background: #fff;      /* 白色背景 */
  color: #000;           /* 主文字黑色 */
  padding: 8px;
}
.room-card .room-id {
  font-size: 18px;
  margin-bottom: 4px;
}
.room-card .room-name {
  font-size: 14px;
  color: #221d1d;
  margin-bottom: 6px;
}
.room-card .room-time {
  font-size: 14px;
}
.room-card .room-subtime {
  font-size: 12px;
  margin-top: 4px;
  color: #aaa;
}
.room-card .room-group {
  font-size: 12px;
  color: #333;
  margin-top: 6px;
  font-weight: 500;
}
.room-card .room-purpose {
  font-size: 12px;
  color: #555;
  margin-top: 2px;
}

/* 添加业务员提示样式 */
.business-message {
	font-size: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #5e86ff;
}

.business-message text {
  color: #fff;
  font-size: 32rpx;
}

/* 吧员页面样式 */
.bartender-page {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 30rpx;
}

.wine-list-bartender {
  /* 列表容器样式 */
}

.wine-item-bartender {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.wine-item-bartender .item-header-bartender {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #eee;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
}

.wine-item-bartender .item-header-bartender .date {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.wine-item-bartender .item-header-bartender .room {
  font-size: 28rpx;
  color: #666;
}

.wine-item-bartender .item-main-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30rpx; /* 增加信息区域和按钮之间的间距 */
}

.wine-item-bartender .item-main-content .item-body-bartender {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 10rpx; /* 增加每行信息之间的垂直间距 */
}

.wine-item-bartender .item-main-content .item-body-bartender .info-row-bartender {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.wine-item-bartender .item-main-content .item-body-bartender .info-row-bartender .label {
  font-size: 28rpx;
  color: #555;
  flex-shrink: 0; /* 防止标签缩小 */
  margin-right: 20rpx; /* 标签和值之间的间距 */
}

.wine-item-bartender .item-main-content .item-body-bartender .info-row-bartender .value {
  font-size: 28rpx;
  font-weight: bold; /* 让值更突出 */
  color: #333;
  text-align: right;
  flex-grow: 1;
}

.wine-item-bartender .item-main-content .confirm-btn {
  width: 180rpx; /* 调整按钮宽度，使其更适合文本 */
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background-color: #409eff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  border: none;
  flex-shrink: 0; /* 防止按钮缩小 */
}

.wine-item-bartender .item-main-content .confirm-btn:active {
  background-color: #3a8ee6;
}

.no-data-bartender {
  text-align: center;
  padding: 30rpx;
  color: #999;
  font-size: 28rpx;
}

/* 发台员页面样式 */
.fatai-container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.room-list .room-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.room-list .room-item .room-info {
  margin-bottom: 20rpx;
}

.room-list .room-item .room-info .room-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.room-list .room-item .room-info .room-header .room-id {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.room-list .room-item .room-info .room-header .room-name {
  font-size: 32rpx;
  color: #666;
}

.room-list .room-item .room-info .room-details {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.room-list .room-item .room-info .room-details .detail-item {
  font-size: 28rpx;
  color: #666;
}

.room-list .room-item .confirm-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #67C23A;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  border: none;
}

.room-list .room-item .confirm-btn:active {
  background-color: #85ce61;
}

.loading, .no-data {
  text-align: center;
  padding: 30rpx;
  color: #999;
  font-size: 28rpx;
}

.fixed-refresh-btn {
  position: fixed;
  right: 40rpx;
  bottom: 60rpx;
  z-index: 999;
  background: #409eff;
  color: #fff;
  border-radius: 50%;
  width: 100rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
  cursor: pointer;
  transition: background 0.2s;
}
.fixed-refresh-btn:active {
  background: #3a8ee6;
}

/* 业务员页面样式 */
.business-container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.business-container .page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 30rpx;
}

.business-container .room-list .room-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.business-container .room-list .room-item .room-info {
  margin-bottom: 20rpx;
}

.business-container .room-list .room-item .room-info .room-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.business-container .room-list .room-item .room-info .room-header .room-id {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.business-container .room-list .room-item .room-info .room-header .room-name {
  font-size: 32rpx;
  color: #666;
}

.business-container .room-list .room-item .room-info .room-details {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.business-container .room-list .room-item .room-info .room-details .detail-item {
  font-size: 28rpx;
  color: #666;
}

.business-container .room-list .room-item .view-detail-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #409eff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  border: none;
}

.business-container .room-list .room-item .view-detail-btn:active {
  background-color: #3a8ee6;
}

/* 新增样式 */
.user-room-search-bar {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin: 24rpx 0 16rpx 0;
  padding: 16rpx 20rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.search-input {
  flex: 1;
  height: 64rpx;
  border: 1rpx solid #dcdfe6;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  background: #f8f9fa;
  margin-right: 8rpx;
}

.search-input-half {
  flex: 0.5;
  height: 64rpx;
  border: 1rpx solid #dcdfe6;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  background: #f8f9fa;
  margin-right: 8rpx;
}
.search-btn {
  background: #409EFF;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  height: 64rpx;
  min-width: 120rpx;
  font-size: 28rpx;
  margin-right: 8rpx;
  transition: background 0.2s;
}
.search-btn:disabled {
  background: #a0cfff;
  color: #fff;
}
.reset-btn {
  background: #f5f7fa;
  color: #333;
  border: none;
  border-radius: 8rpx;
  height: 64rpx;
  min-width: 120rpx;
  font-size: 28rpx;
  transition: background 0.2s;
}
.reset-btn:active {
  background: #e6e6e6;
}

/* 业务经理部门房间加载状态样式 */
.dept-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 20rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12rpx;
  margin: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.dept-loading-text {
  font-size: 28rpx;
  color: #409EFF;
  font-weight: 500;
}
</style>
